<template>
  <div class="p-container">
    <my-card :list="list">
      <template #title>
        <h3>本周热搜榜 TOP5</h3>
      </template>
      <template #left="{ msg }">
        {{ msg.title }}
      </template>

      <template #right="{ msg }">
        <img src="" alt="" />
        <span>{{ msg.hot }}</span>
      </template>
    </my-card>

    <my-card :list="list">
      <template #title>
        <h3>可能感兴趣的人</h3>
        <h4 style='margin-left: 70px;'>换一批</h4>
      </template>
      <template #list-item="{ msg }">
        {{ msg.title }}
      </template>
    </my-card>
  </div>
</template>

<script>
import MyCard from './components/my-card.vue'

export default {
  components: { MyCard },
  data() {
    return {
      list: [
        {
          id: 1,
          title: '#区块链',
          hot: 80,
        },
        {
          id: 2,
          title: '#数据挖掘',
          hot: 90,
        },
        {
          id: 3,
          title: '#无人机',
          hot: 89,
        },
        {
          id: 4,
          title: '#生命科学',
          hot: 79,
        },
        {
          id: 5,
          title: '#传感器',
          hot: 73,
        },
      ],
      num: [
        {
          id: 1,
          title: '#区块链',
          hot: 80,
        },
        {
          id: 2,
          title: '#数据挖掘',
          hot: 90,
        },
        {
          id: 3,
          title: '#无人机',
          hot: 89,
        },
      ],
    }
  },
}
</script>

<style></style>
